import React, { useEffect, useRef } from 'react'
import styles from './look.less'
import { useDispatch, useSelector, useHistory, useLocation } from 'umi'
import { Select, Form, Input, Button, message } from 'antd';
import { IQuestionType, ISubject, IExamType, IQuestionForm, InewType } from '@/utils/interface'
const LookPage: React.FC = () => {
  const selectAll = useRef(null)
  const dispatch = useDispatch()
  const history = useHistory()
  const { newTypes } = useSelector(module => (module as { addQuestions: { newTypes: [] } }).addQuestions)
  const { examTypes } = useSelector(module => (module as { addQuestions: { examTypes: [] } }).addQuestions)
  const { subjects } = useSelector(module => (module as { addQuestions: { subjects: any[] } }).addQuestions)
  const { questionType } = useSelector(module => (module as { addQuestions: { questionType: any[] } }).addQuestions)
  //点击高亮
  function selectClass(e: React.MouseEvent<HTMLDivElement>) {
    if ((e.target as HTMLDivElement).tagName === 'SPAN') {
        let p=(selectAll.current as unknown as Element).querySelectorAll('p')[0]
        let arr = [...(selectAll.current as unknown as Element).querySelectorAll('span')]
        if((p as unknown as Element).classList.contains('active')){
            (p as unknown as Element).classList.remove('active');
            arr.forEach(item => item.classList.remove('active'));
            (e.target as HTMLDivElement).classList.add('active');
        }else{
            if ((e.target as HTMLDivElement).classList.contains('active')) {
                (e.target as HTMLDivElement).classList.remove('active')
            } else {
                let arr = [...(selectAll.current as unknown as Element).querySelectorAll('span')];
                arr.forEach(item => item.classList.remove('active'));
                (e.target as HTMLDivElement).classList.add('active')
            }
        }  
    }
    if ((e.target as HTMLDivElement).tagName === 'P') {
        let arr = [...(selectAll.current as unknown as Element).querySelectorAll('span')]
        if ((e.target as HTMLDivElement).classList.contains('active')) {
            (e.target as HTMLDivElement).classList.remove('active')
            arr.forEach(item => item.classList.remove('active'))
        } else {
            (e.target as HTMLDivElement).classList.add('active')
            arr.forEach((item) => {
                item.classList.add('active')
            })
        }
    }
}
  const editorLayout = {
    wrapperCol: { span: 20 }
  }
  const { Option } = Select
  //点击查询
  function onFinish(value:{exam_id:string,questions_type_id:string}){
    console.log(value,)
    let spans = [...(selectAll.current as unknown as Element).querySelectorAll('span.active')][0]
    console.log(spans)
    let subject_id=(spans as HTMLElement).dataset.id
    let values={}
    values={
        ...value,
        subject_id
    }
    console.log(values)
    dispatch({
        type:'addQuestions/conditionQuestions',
        payload:values
    })
}
  //点击跳入详情
  function godetaile(item: InewType) {
    history.push({
      pathname: '/main/questionDetail',
      state: item,
    })
  }
  //点击编辑
  function pushCompile(item: InewType) {
    history.push({
      pathname: '/main/compileDetaile',
      state: item
    })
  }
  //派发dispatch
  useEffect(() => {
    dispatch({
      type: "addQuestions/newType",
    })
    dispatch({
      type: 'addQuestions/getExamType'
    })
    dispatch({
      type: 'addQuestions/getExamSubject'
    })
    dispatch({
      type: 'addQuestions/getQuestionType',
    })
  }, [])
  return (
    <div className={styles.wrap}>
      <h1>查看试题</h1>
      <div className={styles.content}>
        <div className={styles.cona}>
          <p>课程类型:</p>
          <div className={styles.conaa} onClick={selectClass} ref={selectAll}>
            <p >All</p>
            {
              subjects?.map((item) => {
                return <span key={item.subject_id} data-id={item.subject_id}>{item.subject_text}</span>
              })
            }
          </div>

        </div>
        <div className={styles.bodys}>
          <Form onFinish={onFinish}>
            <div>
              <label htmlFor="">考试类型：</label>
              <Form.Item
                name="exam_id"
                {...editorLayout}
              >
                <Select style={{ width: 250 }}>{
                  (examTypes as IExamType[]).map(item => {
                    return <Option key={item.exam_id} value={item.exam_id}>{item.exam_name}</Option>
                  })
                }</Select>
              </Form.Item>
            </div>
            <div>
              <label htmlFor="">题目类型：</label>
              <Form.Item
                name="questions_type_id"
                {...editorLayout}
              >
                <Select style={{ width: 250 }}>{
                  (questionType as IQuestionType[]).map(item => {
                    return <Option key={item.questions_type_id} value={item.questions_type_id}>{item.questions_type_text}</Option>
                  })
                }</Select>
              </Form.Item>
            </div>
            <Button type="primary" htmlType="submit" className={styles.btn}>
              查询
                    </Button>
          </Form>
        </div>
      </div>
      <div className={styles.bottom}>
        {
          newTypes && newTypes.map((item: any) => {
            return <div>
              <div onClick={() => { godetaile(item) }} className={styles.items}>
                <p> {item.title}</p>
                <div className={styles.center}>
                  <span>{item.questions_type_text}</span>
                  <span>{item.subject_text}</span>
                  <span>{item.exam_name}</span>
                </div>
                <div className={styles.c2}>
                  {item.user_name} 发布
                        </div>

              </div>
              <div className={styles.compile} onClick={() => { pushCompile(item) }}>
                编辑
                        </div>
            </div>


          })
        }
      </div>

    </div>
  );
}
export default LookPage